<template>
  <div class="contain">
    <van-loading v-if="loading && index < 2" size="24px" vertical>加载中...</van-loading>
    <van-pull-refresh v-else v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <ul class="yM-rS">
        <router-link
          tag="li"
          :to="{path:'songLeaderboards',query:{rankid:item.rankid}}"
          class="yM-rS-list"
          v-for="item in musicLeaderboards"
          :key="item.rankid"
        >
          <div class="yM-list-item">
            <h3>{{item.rankname}}</h3>
            <div
              class="img"
              :style="{backgroundImage: 'url(' + item.imgurl.replace('{size}',480) + ')'}"
            >
              <div class="mask"></div>
            </div>
          </div>
        </router-link>
      </ul>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  name: 'Recommend',
  data() {
    return {
      musicLeaderboards: [],
      isLoading: true,
      loading: false,
      index: 0
    }
  },
  created: function() {
    this.getMusicLeaderboard()
  },
  methods: {
    getMusicLeaderboard: async function() {
      this.index++
      this.loading = true
      const { data: res } = await this.axios.get('api/rank_list/')
      if (res.code === 200) {
        this.musicLeaderboards = res.data.list
      }
      this.loading = false
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.getMusicLeaderboard()
      }, 1000)
    }
  }
}
</script>
<style scoped lang="less">
.contain {
  margin-top: 40px;
  .yM-rS {
    padding: 0 20px;
    .yM-rS-list {
      width: 100%;
      margin-bottom: 40px;
      border: 1px solid #ccc;
      border-radius: 20px;
      .yM-list-item {
        line-height: 100%;
        position: relative;
        // height: 200px;清除浮动的两种方法
        //   overflow: hidden;
        h3 {
          position: absolute;
          top: 20%;
          left: 10%;
          display: inline-block;
        }
        .img {
          float: right;
          width: 200px;
          height: 200px;
          border-radius: 0 20px 20px 0;
          background-image: url('../assets/img/yM-fS-item.jpg');
          background-size: contain;
          .mask {
            width: 100%;
            height: 100%;
            border-radius: 0 20px 20px 0;
            background-color: #000;
            opacity: 0.3;
          }
        }

        &:after {
          display: block;
          clear: both;
          content: '';
          visibility: hidden;
          height: 0;
        }
      }
    }
  }
}
</style>